<script>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem的话很方便实用
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
    onBeforeUnmount,
} from 'vue';
import ViewHead from './components/viewHead.vue';
import img_1 from './assets/bg.png';
import img_2 from './assets/1-1-bg.png';
import left_1 from './components/left_1.vue';
// import Box_5 from './components/box_5.vue';
import { setRem } from '@/common/rem.js';
import { name } from 'file-loader';
import api from '@/http/public.js';
// import AMapLoader from "@amap/amap-jsapi-loader";
export default defineComponent({
    name: 'BigScreenView',
    components: {
        ViewHead,
        left_1,
    },
    setup() {
        const ViewRef = ref(null);
        const topList = ref([
            { name: '实时有功功率', unit: 'MW', value: '0' },
            { name: '实时无功功率', unit: 'MVar', value: '0' },
            { name: '实时功率因数', unit: '', value: '0' },
            { name: '调度有功功率', unit: 'MW', value: '0' },
            { name: '调度无功功率', unit: 'MVar', value: '0' },
        ]);
        const dataContainer = reactive({
            loading: false,
            leftOne: [],
            timeValue: '',
            times: ''
        });
        /** 是否是文档上 */
        function isActive() {
            if (!ViewRef.value) return false;
            return ViewRef.value.getRootNode() === document;
        }
        /**
         * 计算rem
         *  */
        function computeRem() {
            if (!ViewRef.value) return;
            if (!isActive) return;
            let rect = ViewRef.value.getBoundingClientRect();
            let baseSize = 16; //基础大小，1倍率相当于1rem = 16像素
            let scale = rect.width / 1920;
            let fontSize = Math.round(baseSize * scale * 100) / 100 + 'px';
            /**
             * 计算缩放倍数 1920 * 1080
             * 根据设计图自己配置
             *  */
            setRem(fontSize);
        }
        function generateTimeArray() {
            return Array.from({ length: 24 * 60 }, (_, index) => {
                const hour = Math.floor(index / 60);
                const minute = index % 60;
                return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
            });
        }
        function init() {
            const newTime = new Date()
            dataContainer.times = newTime.getFullYear() + '-' + String(newTime.getMonth() + 1).padStart(2, '0') + '-' + String(newTime.getDate()).padStart(2, '0')
            api.getShow1({ code: 'show_5', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times, dataContainer.times] }).then(res => {
                console.log(res)
                dataContainer.leftOne = res.dat.inf
                topList.value.forEach((v, index) => {
                    v.value = res.dat.pwr[index].toFixed(2)
                })
                dataInfo.value.xData = generateTimeArray()
                dataInfo1.value.xData = generateTimeArray()
                dataInfo.value.data = res.dat.crv
                res.dat.his = res.dat.his.map(v => {
                    if (!Array.isArray(v)) {
                        v = []
                    }
                    return v
                })
                dataInfo1.value.data = res.dat.his
            })
        }
        onMounted(() => {
            computeRem();
            //引入高德地图
            let imageContainer = document.getElementById("container");
            let imgs = document.getElementById("imgs");
            imageContainer.addEventListener("wheel", function (event) {
                event.preventDefault(); // 阻止默认滚动行为

                var zoom = event.deltaY > 0 ? 0.9 : 1.1; // 根据滚动方向确定缩放比例
                var currentWidth = imageContainer.offsetWidth;
                var currentHeight = imageContainer.offsetHeight;

                imgs.style.width = currentWidth * zoom + "px";
                imgs.style.height = currentHeight * zoom + "px";
            });

            init()

            // var center = map.getCenter();
        });
        let timer = setInterval(() => {
            computeRem();
            init()
        }, 60000);
        window.addEventListener('resize', computeRem);
        onBeforeUnmount(() => {
            window.removeEventListener('resize', computeRem);
            window.clearInterval(timer);
        });
        const dataInfo = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001', '#e27e9a'],
            name: ['光伏电站实发有功功率(MW)', '光伏电站实发无功功率(MVar)', '提前24h预测曲线', '提前4h预测曲线', '提前15min预测曲线'],
            data: [],
            xData: [],
            end: 5
        })
        const dataInfo1 = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001', '#e27e9a'],
            name: ['光伏电站实发有功功率历史数据(MW)', '光伏电站实发无功功率历史数据(MVar)', '提前24h预测曲线', '提前4h预测曲线', '提前15min预测曲线'],
            data: [],
            xData: [],
            end: 5
        })
        return {
            dataContainer,
            ViewRef,
            topList,
            dataInfo,
            dataInfo1
        };
    },
});
</script>

<template>
    <el-scrollbar height="100vh">
        <div ref="ViewRef" class="big-screen-view">
            <div class="head">
                <ViewHead title="多能互补一体化调控平台">
                    <template #left>
                        <div class="yun-img">
                            <!-- <img src="@/assets/img-show2/yun.png" alt="">
                            <span class="temp">多云</span>
                            <span class="numberC">10</span>
                            <span class="cs">&nbsp; ℃</span> -->
                            <span class="numberC">光伏电站模块</span>
                        </div>
                    </template>
                    <template #right>
                        <div class="right-box">
                            <div class="right-box-item-title">{{ dataContainer.times }}</div>
                        </div>
                    </template>
                </ViewHead>
            </div>
            <div class="content">
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div class="title">基础信息</div>
                        <left_1 :dataInfo="dataContainer.leftOne"></left_1>
                    </div>
                    <div class="left_box_item1" style="height: 20rem;">
                        <div class="title">光伏板位置分布图</div>
                        <div class="box_img" style="margin: 0.625rem;overflow: hidden;" id="container">
                            <img id="imgs" src="./assets/mapimg.png" alt="">
                        </div>
                    </div>
                    <div class="left_box_item1" style="height: 19rem;">
                        <div class="title">电气主接线图</div>
                        <div class="box_img">
                            <img class="imgs" src="./assets/xiantu.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="right_box">
                    <div class="right_box_item1" style="height: 10rem;">
                        <div class="title">实时功率指标</div>
                        <div class="lists">
                            <div class="items" v-for="(item, index) in topList" :key="index">
                                <p>{{ item.name }}</p>
                                <p class="num_p">{{ item.value  }} {{ item.unit }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="right_box_item1 changbeij" style="height: 24rem;">
                        <div class="title">电站发电曲线</div>
                        <brokenline v-if="dataInfo.data.length" :dataInfo="dataInfo"></brokenline>
                    </div>
                    <div class="right_box_item1 changbeij" style="height: 24rem;">
                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">光伏电场历史数据展示</div>
                            <el-date-picker v-model="dataContainer.timeValue"
                                style="max-width: 20rem;background: none;transform: translateY(0.188rem);"
                                type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"
                                size="small" />
                        </div>
                        <brokenline v-if="dataInfo1.data.length" :dataInfo="dataInfo1"></brokenline>
                    </div>
                </div>

            </div>
        </div>
    </el-scrollbar>
</template>
<style>
.amap-icon {
    overflow: auto !important;
}

.amap-icon img {
    transform: translateX(-25px) !important;
}
</style>
<style lang="scss" scoped>
::v-deep .el-range-input {
    color: #fff;
}

::v-deep .el-range-separator {
    color: #fff;
}

::v-deep .el-picker-panel__body-wrapper {
    background: #031045c7 !important;
}

.big-screen-view {
    /** 保持宽高比 */
    width: 100vw;
    height: calc(100vw / calc(1920 / 1080));
    overflow: hidden;
    background-color: #031045c7;
    display: flex;
    flex-direction: column;
    background-image: url('@/assets/images/bjdazong.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    >.head {
        height: 5.688rem;

        .yun-img {
            img {
                width: 2.250rem;
                height: 1.938rem;
            }

            .temp {
                color: #D8D8D8;
                font-size: 0.75rem;
            }

            .numberC {
                font-size: 1.5rem;
            }

            .cs {
                font-size: 1.125rem;
                font-weight: 200;
            }
        }

        .right-box-item-title {
            font-weight: 300;
        }

    }

    >.content {
        display: flex;
        justify-content: space-between;
        width: 100%;

        >.left_box,
        .right_box {

            padding: 0 0.625rem;
            // height: 100%;
            margin-top: 1.250rem;
            overflow: hidden;

            // flex: 1 1 0;
            // width: 37.500rem;
            .title {
                color: #FFFFFF;
                font-size: 1rem;
                // margin-left: 1rem;
                background: url('@/assets/img-show2/smallTitle.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                height: 1.875rem;
                line-height: 1.875rem;
                width: 34rem;
                padding-left: 1rem;
            }



        }

        .left_box {
            width: 30%;

            .left_box_item1 {
                background-image: url('@/assets/img-show2/borderBack.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                margin-bottom: 1.250rem;
                overflow: hidden;

                .box_img {
                    text-align: center;
                    padding: 0.625rem;
                    height: 100%;

                    .imgs {
                        width: 95%;
                        height: 80%;
                    }
                }

                // padding: 1.000rem;
            }
        }

        .right_box {
            width: 70%;

            .right_box_item1 {
                margin-bottom: 1.250rem;

                .lists {

                    // margin: auto 1rem;
                    margin-top: 1.250rem;
                    display: flex;
                    justify-content: space-between;

                    .items {
                        width: 14.375rem;
                        height: 6.875rem;
                        background-image: url('@/assets/images/xiao.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-position: center;
                        border-radius: 0.313rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        p {
                            color: #3adeff;
                            font-size: 1.4rem;
                            // margin-top: 1.250rem;
                        }

                        .num_p {
                            font-size: 1.2rem;
                            color: #fff;
                            margin-top: 0.625rem;
                        }
                    }
                }
            }

            .changbeij {
                background-image: url('@/assets/images/chang.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
            }
        }
    }
}
</style>
